<template>
  <div class="chinese">
    <div class="crumb">
      <Crumb menName1="学前教育" />
      <el-button class="edit" @click="showEcharts">近期战绩</el-button>
    </div>

    <!-- echarts图表 -->
    <div class="bg" v-show="dialogVisible" @click="downDialogVisible">
      <div class="echartsform" @click.stop>
        <div class="px" @click.stop="downDialogVisible">
          <i class="iconfont icon-close"></i>
        </div>

        <div id="myChart" :style="{ width: '850px', height: '450px' }"></div>

        <div v-if="!isSearch" class="footer">
          <span> 1 </span>
          <input
            id="snrPollInterval"
            @change="watchMore"
            type="range"
            v-model="pageSizeE"
            :max="totalS > 40 ? '40' : totalS"
            min="1"
            step="1"
          />
          <span>
            {{ totalS > 40 ? "40" : totalS }}
          </span>
        </div>
      </div>
    </div>


<!-- 试题练习区 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-cascader
          v-model="valuelist"
          :options="options"
          :props="{ expandTrigger: 'hover' }"
          @change="handleChange"
        ></el-cascader>

        <el-input
          placeholder="请输入试题关键字"
          v-model="input3"
          class="input-with-select"
          @keyup.enter.native="getKeylist"
        >
        </el-input>
      </div>

<!-- 默认的分页条 -->
      <div class="pages" v-if="isSearch">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="num"
          :page-sizes="[3, 5, 8, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

<!-- 关键字搜索时的分页条 -->
      <div class="pages" v-else>
        <el-pagination
          @size-change="handleSizeChangeS"
          @current-change="handleCurrentChangeS"
          :current-page="numS"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSizeS"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalS"
        ></el-pagination>
      </div>

      <!-- 试题列表部分 -->
      <ul>
        <li v-for="(item, index) in testList" :key="item._id">
          <!-- 题干 -->
          <p>
            <!-- 判断题型 -->
            <span v-if="item.test_type == 1"> 《单选》 </span>
            <span v-if="item.test_type == 2"> 《多选》 </span>
            <span v-if="item.test_type == 3"> 《填空题》 </span>
            <span v-if="item.test_type == 4"> 《判断题》 </span>
            <span v-if="item.test_type == 5"> 《解答题》 </span>
            <span>{{ index + 1 }}.</span>
            <span v-html="item.test_content"></span>
          </p>

          <p v-if="item.test_type == 1">
            <template>
              <el-radio v-model="test_user_answer.test_answer" label="A"
                >A</el-radio
              >
              <el-radio v-model="test_user_answer.test_answer" label="B"
                >B</el-radio
              >
              <el-radio v-model="test_user_answer.test_answer" label="C"
                >C</el-radio
              >
              <el-radio v-model="test_user_answer.test_answer" label="D"
                >D</el-radio
              >
            </template>
          </p>
          <p v-if="item.test_type == 2">
            <el-checkbox-group v-model="test_user_answer.test_answer">
              <el-checkbox label="A">
                <span> A </span>
              </el-checkbox>
              <el-checkbox label="B">
                <span> B </span>
              </el-checkbox>
              <el-checkbox label="C">
                <span> C </span>
              </el-checkbox>
              <el-checkbox label="D">
                <span> D </span>
              </el-checkbox>
            </el-checkbox-group>
          </p>

          <!-- 填空题 多个答案以空格隔开 -->
          <p v-if="item.test_type == 3">
            <el-input
              placeholder="多个答案以空格隔开"
              type="text"
              v-model="test_user_answer.test_answer"
            ></el-input>
          </p>
          <p v-if="item.test_type == 4">
            <!-- 判断题 -->
            <template>
              <el-radio v-model="test_user_answer.test_answer" label="0">√</el-radio>
              <el-radio v-model="test_user_answer.test_answer" label="1">×</el-radio>
            </template>
          </p>
          <p v-if="item.test_type == 5">
            <!-- 解答题 -->
            <quill-editor
              :options="editorOption"
              v-model="test_user_answer.test_answer"
            ></quill-editor>
          </p>

          <p>
            这是答案：
            <span v-html="item.test_answer"></span>
          </p>
            <p>
            这是解析：
             <span v-html="item.test_analysis"></span>
          </p>
        </li>
      </ul>
    </el-card>
  </div>
</template>
<script>
import Crumb from "@/components/bread/index.vue";

export default {
  data() {
    return {
      test_user_answer: {
        test_answer: [],
      },
      pageSizeE: 5,
      isSearch: true,
      input3: "",
      dialogVisible: false,
      valuelist: [],

      options: [],
      value: "",
      tableData: [],
      num: 1,
      total: 0,
      pageSize: 5,

      numS: 1,
      totalS: 0,
      pageSizeS: 5,
      routerId: 0,
      test_project: 1,
      test_type: 1,
      user_id: "",
      arr: [],
      echartslist: [],
      testList: [],
    };
  },
  components: {
    Crumb,
  },
  created() {
    this.user_id = JSON.parse(window.sessionStorage.getItem("user"))._id;

    let list = JSON.parse(window.sessionStorage.getItem("user"))
      .user_project_arr;

    // console.log(list)

    this.options = list.map((item) => {
      item.children = [
        { value: "1", label: "错题集" },
        { value: "2", label: "收藏夹" },
        { value: "3", label: "全部" },
      ];
      return item;
    });
    // this.getHome();
  },
  mounted() {
    //echarts刷新事件
    this.drawLine();

    //获取默认的数据
    this.getPageData();
  },
  watch: {
    $route() {
      this.routerId = this.$route.params.id; //获取传来的参数
      // console.log(this.routerId);
      this.getHome();
    },
    echartslist: function (newvalue, oldvalue) {
      if (newvalue !== oldvalue) {
        this.drawLine();
      }
    },
  },

  methods: {
    //分页获取数据
    async getPageData() {
      let data = await this.$http.get("test/getTests", {
        params: {
          num: this.num,
          pageSize: this.pageSize,
          test_grade: this.routerId,
          test_project: this.test_project,
        },
      });

      if (data.status == 200) {
        // console.log(data)
        this.total = data.data.total;
        // console.log(this.total)
        this.testList = data.data.data;
      } else {
        this.$message.error(data.data.message);
      }
    },
    async watchMore() {
      // console.log(this.pageSizeE);
      if (this.isSearch == true) {
      } else {
        let keywords = window.sessionStorage.getItem("keywords");
        let data = await this.$http.get("home/rankkeywords", {
          params: {
            num: this.numS,
            pageSize: this.pageSizeE,
            user_id: this.user_id,
            keywords: this.input3 || keywords,
          },
        });

        if (data.status == 200) {
          this.echartslist = data.data.datalist;
          if (this.input3) {
            window.sessionStorage.setItem("keywords", this.input3);
          }

          this.input3 = "";
          this.isSearch = false;
          // this.drawLine();
        } else {
          this.$message.error(data.data.message);
        }
      }
    },
    //根据关键字搜索
    async getKeylist() {
      let keywords = window.sessionStorage.getItem("keywords");

      let data = await this.$http.get("home/rankkeywords", {
        params: {
          num: this.numS,
          pageSize: this.pageSizeS,
          user_id: this.user_id,
          keywords: this.input3 || keywords,
        },
      });

      if (data.status == 200) {
        this.tableData = data.data.datalist;
        this.totalS = data.data.total;
        if (this.input3) {
          window.sessionStorage.setItem("keywords", this.input3);
        }

        this.input3 = "";
        this.isSearch = false;
        // this.drawLine();
      } else {
        this.$message.error(data.data.message);
      }
    },

    //echarts基本配置
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.querySelector("#myChart"));
      // console.log("echarts基本配置被调用");
      // 绘制图表
      myChart.setOption({
        legend: {
          selected: {
            年級排名: false,
            区排名: false,
            市排名: false,
            //不想显示的都设置成false
          },
        },
        tooltip: {},
        dataset: {
          dimensions: [
            "test_name",
            "class_ranking",
            "school_ranking",
            "area_ranking",
            "city_ranking",
          ],

          source: this.echartslist,
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            name: "班級排名",
            type: "bar",
            color: "#409EFF",
          },

          { name: "年級排名", type: "bar", color: "#f8a5c2" },
          { name: "区排名", type: "bar", color: "#8e44ad" },
          { name: "市排名", type: "bar", color: "#1dd1a1" },
        ],
      });
    },

    //弹出echarts图标
    async showEcharts() {
      console.log(this.isSearch);
      console.log(this.totalS);
      if (this.isSearch) {
        //此时在成绩展示页面
        let data = await this.$http.get("home/rankEcharts", {
          params: {
            user_id: this.user_id,
            test_project: this.test_project,
            test_type: this.test_type,
            test_grade: this.routerId,
          },
        });
        // console.log(data);
        if (data.status == 200) {
          this.echartslist = data.data.datalist;
          this.dialogVisible = true;
          // this.drawLine(0);
        } else {
          this.$message.error(data.data.message);
        }
      } else {
        //此时在search 页面，echarts图表该展示 search list
        this.echartslist = this.tableData;
        this.dialogVisible = true;
      }
    },

    //
    downDialogVisible() {
      console.log("123");
      this.dialogVisible = false;
      this.pageSizeE = 5;
      return false;
    },

    //跳转到修改数据页面
    goUpdata(_id) {
      this.$router.push(`/uploadgard/${_id}`);
    },

    //删除一条数据
    delRank(e) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = await this.$http.delete("home/rankdel", {
            params: {
              _id: e._id,
            },
          });
          if (data.status == 200) {
            this.$message.success(data.data.message);
            this.getHome();
          } else {
            this.$message.error(data.data.message);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //分页获取学科数据
    async getHome() {
      let data = await this.$http.get("home", {
        params: {
          num: this.num,
          pageSize: this.pageSize,
          test_grade: this.routerId,
          test_project: this.test_project,
          test_type: this.test_type,
          user_id: this.user_id,
        },
      });
      if (data.status == 200) {
        this.isSearch = true;
        this.total = data.data.total;
        this.tableData = data.data.datalist;
      } else {
        this.$message.success(data.data.message);
      }
    },

    //上面选项框改变事件
    handleChange(value) {
      // console.log(value);
      this.test_project = value[0];
      this.test_type = value[1];
      this.getPageData();
    },

    //分页条事件
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getPageData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.num = val;
      this.getPageData();
    },

    handleSizeChangeS(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSizeS = val;
      this.getKeylist();
    },
    handleCurrentChangeS(val) {
      // console.log(`当前页: ${val}`);
      this.numS = val;
      this.getKeylist();
    },
  },
};
</script>

<style scoped lang="less">
.crumb {
  position: relative;
  .edit {
    position: absolute;
    right: 20px;
    top: 4px;
  }
}

.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pages {
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-55%);
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-pagination {
    position: relative;
    top: 10px;
  }
}
.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  // display: flex;
  // justify-content: center;
  // align-items: center;

  .echartsform {
    padding: 30px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .px {
      width: 50px;
      height: 50px;
      position: absolute;
      right: 0px;
      top: 0px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        font-size: 24px;
        color: #898989;
      }
    }
  }
}

.input-with-select {
  width: 280px;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  span {
    margin: 0 10px;
    color: #333;
  }
  input {
    width: 300px;
  }
}

.box-card {
  min-height: 500px;
  position: relative;
  padding-bottom: 70px;
}
</style>